	<template>
	<view>
		<!-- 第二层筛选 -->
		<view class="screening-box">
			<!-- 单据状态筛选 -->
			<view  @click="toggleBillsStateMask('show')" v-if="orderData && (orderData.st == 2 || orderData.st == 3  || orderData.st == 4 || orderData.st == 5)">{{filltersData.billsState}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
			
			<!-- 时间筛选-->
			<view @click="toggleTimeStateMask('show')" >{{filltersData.timeState}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
			
			<!-- 仓库筛选   检测用户是否有权 -->
			<view v-if="isStores && (orderData.st == 2 || orderData.st == 3  || orderData.st == 4 || orderData.st == 5 || orderData.st == 20 || orderData.st == 21 || orderData.st == 22)" @click="toggleStoresStateMask('show')">{{filltersData.storesState}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
			
			<!-- 经手人筛选  检测用户是否有权 -->
			<view v-if="isHandlers && orderData && (orderData.st == 2 || orderData.st == 3  || orderData.st == 4 || orderData.st == 5 || orderData.st == 20 || orderData.st == 21 || orderData.st == 22)" @click="toggleHandlersStateMask('show')">{{filltersData.handlersState}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
		</view>

		<!-- 单据状态筛选 -->
		<view class="cate-mask"  :class="cateBillsState === 0 ? 'none' : cateBillsState === 1 ? 'show' : ''" @click="toggleBillsStateMask" :style="{
                left: isExpand ? '240px' : '',
            }">
			<view class="cate-content">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in statisticalList" :key="item.id">
						<view class="cate-item" :class="{ active: item.id == filltersData.statisticalIndex }" @click="changeBillsState(item)">{{ item.title }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 时间筛选-->
		<view class="cate-mask"  :class="cateTimeState === 0 ? 'none' : cateTimeState === 1 ? 'show' : ''" @click="toggleTimeStateMask" :style="{
                left: isExpand ? '240px' : '',
            }"
		>
			<view class="cate-content">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in timeStateList" :key="item.id">
						<view class="cate-item" :class="{ active: item.id == filltersData.TimeStateIndex }" @click="changeTimeState(item)">{{ item.title }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 仓库筛选   检测用户是否有权 -->
		<view class="cate-mask"  :class="cateStoresState === 0 ? 'none' : cateStoresState === 1 ? 'show' : ''" @click="toggleStoresStateMask" :style="{
                left: isExpand ? '240px' : '',
            }"
		>
			<view class="cate-content">
				<view  class="cate-list comm-list">
					<view v-for="item in storesStateList" :key="item.id">
						<view class="cate-item" :class="{ active: item.id == filltersData.StoresStateIndex }" @click="changeStoresState(item)">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 经手人筛选   检测用户是否有权 -->
		<view class="cate-mask"  :class="cateHandlersState === 0 ? 'none' : cateHandlersState === 1 ? 'show' : ''" @click="toggleHandlersStateMask" :style="{
                left: isExpand ? '240px' : '',
            }"
		>
			<view class="cate-content">
				<view  class="cate-list comm-list">
					<view v-for="item in HandlersStateList" :key="item.uid">
						<view class="cate-item" :class="{ active: item.uid == filltersData.HandlersStateIndex }" @click="changeHandlersState(item)">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "../../js/conf/Config.js";
	import accessCtrl from "../../js/limit/AccessCtrl.js";
	import https from "../../js/https/Https.js";
	import localStore from "../../js/LocalStore.js";
	import staticConst from "../../js/const/StaticConst.js";
	import { mapGetters } from "vuex";

	export default {
		props:["filltersData","orderData"],
		computed: {
        	...mapGetters(["isExpand"]),
    	},
		data() {
			return {
				isStores : true,//根据权限判断是否展示仓库筛选
				isHandlers : true,//根据条件判断是否展示经手人筛选
				
				// 单据状态筛选
				cateBillsState : 0,
				statisticalList : [
					{
						title : "已确认",
						id : 2,
					},
					{
						title : "待出库",
						id : 4,
					},
					{
						title : "已出库",
						id : 5,
					},
					{
						title : "欠款单",
						id : 3,
					},
					// {
					// 	title : "退款单",
					// 	id : 30,
					// }
				],
				//时间筛选
				cateTimeState : 0,
				timeStateList : [
					{
						title : "全部日期",
						id : '',
					},
					{
						title : "今日",
						id : 1,
					},
					{
						title : "本月",
						id : 2,
					},
					{
						title : "本季",
						id : 3,
					},
					{
						title : "一年内",
						id : 4,
					}
				],
				// 仓库筛选
				cateStoresState : 0,
				storesStateList : [
					{
						name : "全部仓库",
						id : 0,
					}
				],
				// 经手人筛选
				cateHandlersState : 0,
				HandlersStateList : [
					{
						name : "全部经手人",
						uid : ''
					}
				],
			};
		},
		async created() {
			// console.log("根据权限判断是否展示单据状态筛选",this.showFiltersBillsState);
			this.storesState = this.filltersData.storesState;
			this.handlersState = this.filltersData.handlersState;
			
			// 初始化仓库数据&经手人数据
			this.createdStoreList();
			this.isHandlers = await accessCtrl.getLimitBillViewOther();
			if(this.isHandlers)
				this.createdUcpList();
		},
		
		methods: {
			/****选择云店*****/
			changeYdListState(item)
			{
				if(this.filltersData.ydListStateIdex == item.id) return;
				this.filltersData.ydListStateIdex = item.id;
				this.filltersData.ydListState = item.name;
				this.$emit("setYunShopId",item.id);
			},
			
			/*** 云店单据选择,未付款，已付款，全部    ***/
			changeBillsYdStatus(item) 
			{
				if(this.filltersData.ydBillStateIndex == item.id) return;
				this.filltersData.ydBillStateIndex = item.id;
				this.filltersData.ydBillsState = item.title;
				this.$emit("setST",item.id);
			},
			
			/***  初始化仓库数据  SHOP_LS ***/
			async createdStoreList()
			{
				let url = config.STORE_LS;
				let param = {};
				param.md = staticConst.ORDER_CG;
				param.ismy = 1;
				let res = await this.$api({url:url,data:param});
				if(!res)return;
				console.log(res)
				if(!res.data)return;
				this.storesStateList = this.storesStateList.concat(res.data);
			},
			
			/*** 初始化经手人数据	UCP_LS  ***/
			async createdUcpList()
			{
				let url = config.UCP_LS;
				let param = {};
				param.md = 'xs';
				param.ch = 2;
				let res = await this.$api({url:url,data:param});
				if(res && res.status == 1)
				{
					if(!res.data)return;
					this.HandlersStateList = this.HandlersStateList.concat(res.data);
				}
			},
			
			/*** 打开经手人统计方式  --  开始 ***/
			changeHandlersState(item) 
			{
				if(this.filltersData.HandlersStateIndex == item.uid) return;
				this.filltersData.HandlersStateIndex = item.uid;
				this.filltersData.handlersState = item.name;
				this.$emit("setHandlers",item.uid);
			},
			
			/*** 切换单据类型时  重置所有下拉 ***/
			resetFilters()
			{
				this.toggleTimeStateMask();
				this.toggleBillsStateMask();
				this.toggleStoresStateMask();
				this.toggleHandlersStateMask();
			},
			
			//显示分类面板
			toggleHandlersStateMask(type) 
			{	
				if(type == "show") 
				{
					this.toggleTimeStateMask();
					this.toggleBillsStateMask();
					this.toggleStoresStateMask();
				}
				
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.cateHandlersState = 2;
				setTimeout(() => {
					this.cateHandlersState = state;
				}, timer);
			},
			/*** 打开经手人统计方式  --  结束 ***/
			
			/*** 打开时间统计方式  --  开始 ***/
			changeTimeState(item)
			{
				if(this.filltersData.TimeStateIndex == item.id) return;
				this.filltersData.TimeStateIndex = item.id;
				this.filltersData.timeState = item.title;
				this.$emit("setTime",item.id);
			},
			toggleTimeStateMask(type) 
			{	
				if(type == "show")
				{
					this.toggleBillsStateMask();
					this.toggleStoresStateMask();
					this.toggleHandlersStateMask();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.cateTimeState = 2;
				setTimeout(() => {
					this.cateTimeState = state;
				}, timer);
			},
			/*** 打开时间统计方式  --  结束 ***/
			
			
			/*** 打开仓库统计方式  --  开始 ***/
			changeStoresState(item) 
			{
				if(this.filltersData.StoresStateIndex == item.id) return;
				this.filltersData.StoresStateIndex = item.id;
				this.filltersData.storesState = item.name;
				this.$emit("setStoreid",item.id);
			},
			//显示分类面板
			toggleStoresStateMask(type) 
			{	
				if(type == "show")
				{
					this.toggleTimeStateMask();
					this.toggleBillsStateMask();
					this.toggleHandlersStateMask();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.cateStoresState = 2;
				setTimeout(() => {
					this.cateStoresState = state;
				}, timer);
			},
			/*** 打开仓库统计方式  --  结束 ***/
			
			/*** 打开出库统计方式   --  开始  ***/
			changeBillsState(item) 
			{
				if(this.filltersData.statisticalIndex == item.id) return;
				this.filltersData.statisticalIndex = item.id;
				this.filltersData.billsState = item.title;
				this.$emit("setST",item.id);
			},
			//显示分类面板
			toggleBillsStateMask(type) 
			{	
				if(type == "show")
				{
					this.toggleTimeStateMask();
					this.toggleStoresStateMask();
					this.toggleHandlersStateMask();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.cateBillsState = 2;
				setTimeout(() => {
					this.cateBillsState = state;
				}, timer);
			},
			/*** 打开出库统计方式   --  结束  ***/
			
			onClickPageHandler()
			{
				if(this.cateBillsState == 1)
					this.toggleBillsStateMask();
					
				if(this.cateTimeState == 1)
					this.toggleTimeStateMask();
				
				if(this.cateStoresState == 1)
					this.toggleStoresStateMask();
				
				if(this.cateHandlersState == 1)
					this.toggleHandlersStateMask();
			},
		}
	}
</script>
<style lang="scss">
.screening-box
{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0px 6px;
	height: 40px;
	background: #F3F3F2;
	// border-bottom: 1px solid #ECECEC;
	view
	{
		cursor: pointer;
		font-size: 14px;
		max-width: 120px;
		text
		{
			padding-left: 4px;
			font-size: 8px;
			color: #333;
		}
	}
	.divider
	{
		color: #ccc;
	}
}
.cate-mask
{
	margin-top: 20px;
	
}
.cate-list
{
	max-height: 480px;
	view
	{
		padding-left: 10px;
		line-height: 30px;
		font-size: 15px;
		cursor: pointer;
	}
	view:hover
	{
		background-color: #DDD;
	}
}
.active
{
	color: #007AFF;
}

</style>